<template>
  <view class="maintenance-page">
    <!-- 顶部切换栏 -->
    <view class="tab-bar">
      <view
        :class="['tab-item', activeTab === 'ongoing' ? 'active' : '']"
        @click="switchTab('ongoing')"
      >
        进行中
      </view>
      <view
        :class="['tab-item', activeTab === 'completed' ? 'active' : '']"
        @click="switchTab('completed')"
      >
        已完成
      </view>
    </view>

    <!-- 维修方式和预约日期 -->
    <view class="filter-row">
      <!-- 维修方式选择 -->
      <view class="repair-method">
        <view class="method-label">
          <text>维修方式：</text>
          <!-- 下拉框 -->
          <view class="dropdown" @click="toggleDropdown">
            <!-- 显示当前选择的维修方式 -->
            <text>{{ repairMethod === 'all' ? '全部' : repairMethod === 'store' ? '到店维修' : '上门取车' }}</text>
            <!-- 下拉箭头 -->
            <view class="arrow" :class="{ 'arrow-up': isDropdownOpen }">▼</view>
          </view>
        </view>
        <!-- 下拉菜单选项 -->
        <view v-if="isDropdownOpen" class="dropdown-options">
          <!-- 全部选项 -->
          <view
            class="option"
            @click="selectRepairMethod('all')"
          >
            全部
          </view>
          <!-- 到店维修选项 -->
          <view
            class="option"
            @click="selectRepairMethod('store')"
          >
            到店维修
          </view>
          <!-- 上门取车选项 -->
          <view
            class="option"
            @click="selectRepairMethod('pickup')"
          >
            上门取车
          </view>
        </view>
      </view>

      <!-- 预约日期 -->
      <view class="appointment-date">
        <!-- 使用 UniApp 自带的 picker 组件 -->
        <picker mode="date" :value="selectedDate" @change="onDateChange">
          <view class="date-picker">
            <view class="calendar-icon">📅</view>
            <text>{{ selectedDate ? selectedDate : '预约日期' }}</text>
          </view>
        </picker>
      </view>
    </view>

    <!-- 维修信息 -->
    <view class="repair-info">
      <view class="info-item">
        <text>维修单号：</text>
        <text>123456789</text>
      </view>
      <view class="info-item">
        <text>维修方式：</text>
        <text>{{ repairMethod === 'all' ? '全部' : repairMethod === 'store' ? '到店维修' : '上门取车' }}</text>
      </view>
      <view class="info-item">
        <text>预约日期：</text>
        <text>{{ selectedDate || '未选择' }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 顶部切换栏状态，默认选中“进行中”
const activeTab = ref('ongoing');

// 维修方式状态，默认选中“全部”
const repairMethod = ref('all');

// 控制下拉菜单是否展开，默认关闭
const isDropdownOpen = ref(false);

// 选择的日期
const selectedDate = ref('');

// 切换顶部栏的函数
const switchTab = (tab) => {
  activeTab.value = tab; // 更新选中的 tab
  if (tab === 'completed') {
    // 如果切换到“已完成”，跳转到已完成页面
    uni.navigateTo({
      url: '/pages/my/completed/completed', // 替换为你的已完成页面路径
    });
  }
};

// 选择维修方式的函数
const selectRepairMethod = (method) => {
  repairMethod.value = method; // 更新选中的维修方式
  isDropdownOpen.value = false; // 选择后关闭下拉菜单
  handleQuery(); // 自动查询
};

// 切换下拉菜单展开/关闭的函数
const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value; // 切换下拉菜单状态
};

// 日期选择事件
const onDateChange = (event) => {
  selectedDate.value = event.detail.value; // 更新选择的日期
  handleQuery(); // 自动查询
};

// 查询函数
const handleQuery = () => {
  console.log('查询条件：', {
    repairMethod: repairMethod.value,
    selectedDate: selectedDate.value,
  });
  // 这里可以调用查询接口
  // 示例：
  // queryRecords({
  //   repairMethod: repairMethod.value,
  //   selectedDate: selectedDate.value,
  // });
};
</script>

<style scoped>
.maintenance-page {
  padding: 20px;
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* 顶部切换栏样式 */
.tab-bar {
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 20px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  color: #666;
  border-radius: 8px;
  margin: 0 5px;
  transition: background-color 0.3s, color 0.3s;
}

/* 选中的 tab 样式 */
.tab-item.active {
  background-color: #409eff; /* 背景变蓝 */
  color: #fff; /* 文字变白 */
}

/* 维修方式和预约日期横向排布 */
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 让内容分布在两端 */
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
}
/* 维修方式选择样式 */
.repair-method {
  flex: 1;
  margin-right: 70px; /* 维修方式和预约日期之间的间距 */
  position: relative;
}

.method-label {
  display: flex;
  align-items: center;
  font-size: 12px; /* 字体调小 */
  color: #333;
}

/* 下拉框样式 */
.dropdown {
  display: flex;
  align-items: center;
  margin-left: 5px; /* 维修方式与文字挨着 */
  cursor: pointer;
  white-space: nowrap; /* 防止文字换行 */
}

/* 下拉箭头样式 */
.arrow {
  margin-left: 5px;
  font-size: 12px;
  transition: transform 0.3s;
}

/* 下拉箭头展开时的样式 */
.arrow-up {
  transform: rotate(180deg);
}

/* 下拉菜单选项容器样式 */
.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: auto; /* 宽度自适应 */
  min-width: 100%; /* 最小宽度为父容器宽度 */
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 5px;
  z-index: 10;
  white-space: nowrap; /* 防止选项换行 */
}

/* 下拉菜单选项样式 */
.option {
  padding: 10px;
  font-size: 14px; /* 字体调小 */
  color: #333;
  cursor: pointer;
}

/* 下拉菜单选项悬停样式 */
.option:hover {
  background-color: #f0f0f0;
}

/* 预约日期样式 */
.appointment-date {
  flex: 0; /* 取消 flex: 1，避免占用多余空间 */
  display: flex;
  align-items: center;
  font-size: 12px; /* 字体调小 */
  color: #333;
  margin-left: auto; /* 让预约日期靠右 */
}

.date-picker {
  display: flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap; /* 防止文字换行 */
}

.calendar-icon {
  margin-right: 5px; /* 日历图标与文字间距 */
  font-size: 16px;
}

/* 维修信息样式 */
.repair-info {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
}

.info-item {
  margin-bottom: 15px;
}

.info-item text {
  font-size: 14px;
  color: #333;
}

.info-item text:first-child {
  font-weight: bold;
  margin-right: 10px;
}
</style>